<template>
	<view>
		<view class="lunbo">
			<swiper class="swiper" circular autoplay="true" interval="5000" duration="500">
				<swiper-item class="swipeit" v-for="item in swiperList" :key="item.id">
					<image :src="imgUrl+item.pic" mode="scaleToFill" class="img" />
				</swiper-item>
			</swiper>
		</view>
		<view class="titxt">
			<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'active':''" v-for="(item,index) in swiperList"
					:key="item.id" @tap="tabSelect" :data-id="index" :data-bid="item.bid">
					{{item.city_name}}
				</view>
			</scroll-view>
		</view>
		<view class="titxts">
			<view class="kong" v-if="jinlist.length==0">
				<image src="@/static/sjimg/nos.png" mode="widthFix" class="ico6n"></image>
				<view class="kong-p">暂无</view>
			</view>
			<view class="co1" v-for="item in jinlist" :key="item.id" v-else>
				<image :src="imgUrl+item.pic" mode="widthFix" class="kpp" v-if="item.pic"></image>
				<image src="/static/image/bgst.jpg" mode="widthFix" class="kpp" v-else></image>
				<view class="co2">
					<view class="txt0">{{item.merchant_name}}</view>
					<view class="txtbx">
						<view class="t3">精细讲解 | 了解历史</view>
						<view class="jdcss">
							<view class="daocss" @click="yuyes(item)" v-if="item.sort>900">预约</view>
							<view class="jiecss" @click="getLoaction(item)">导航</view>
							<view class="jiecss" @click="getJieshuo(item)">解说</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad } from '@dcloudio/uni-app';
	// import { apiCity , apiCitymer , apiGudetail } from '@/api/apis.js';

	const swiperList = ref([]);
	const jinlist = ref([]);
	const TabCur = ref(0);
	const scrollLeft = ref(0);
	const imgUrl = ref('https://m.aqbwg.cn/sourse/merchant/');

	const tabSelect = (e) =>{
		TabCur.value = e.currentTarget.dataset.id;
		scrollLeft.value = (e.currentTarget.dataset.id - 1) * 60
		const ids= e.currentTarget.dataset.bid;
		jinquList(ids)
	};
	const getLoaction = (e) => {
		uni.openLocation({
			longitude: Number(e.lng),
		    latitude: Number(e.lat),
		    name: e.merchant_name,
		    address: e.address,
		    success: function (res) { },
			fail: function (error) { console.log(error) }
		})
	};
	const getJieshuo = (e) =>{ uni.navigateTo({ url: '/pages/introduction/introduction?merchantId='+e.id+'&title='+e.merchant_name }) };
	const jinquList = async(e) =>{
		try {
			let res = await apiCitymer({
				city_code: e
			});
			if(res.data.result==0){
				jinlist.value=res.data.data
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const yuyes = (e)=>{
		uni.navigateTo({
			url:'/pages/kjindex/kjindex?merchantId='+e.id+'&sortype=0'
		})
	};
	const cityData = async() =>{
		try {
			let res = await apiCity();
			if(res.data.result==0){
				swiperList.value=res.data.data
				const int=res.data.data[0].bid
				jinquList(int)
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};

	onMounted(() => {
		TabCur.value =0
		scrollLeft.value =0
		jinlist.value=[]
		// cityData()
	});
</script>
<style>
	page {
		background-image: linear-gradient(to bottom, #f0f6ff, #fff);
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.titcss {
		padding: 74rpx 30rpx 10rpx;
		display: flex;
		background-color: #f0f6ff;
		justify-content: center;

		.logcss {
			width: 400rpx;
		}
	}

	.lunbo {
		padding: 5rpx 30rpx 20rpx;

		.swiper {
			height: 400rpx;
			margin-top: 10rpx;

			.swipeit {
				display: block;
				height: 400rpx;
				border-radius: 20rpx;
				overflow: hidden;
				line-height: 400rpx;
			}

			.img {
				width: 100%;
				height: 400rpx;
			}
		}
	}

	.titxt {
		padding: 10rpx 30rpx 10rpx;
		font-size: 28rpx;

		.cu-item {
			height: 65rpx;
			display: inline-block;
			line-height: 65rpx;
			margin: 0 10rpx;
			padding: 0 20rpx;
		}

		.active {
			background-color: #1676fe;
			border-radius: 30rpx;
			color: #fff;
		}

		.nav {
			white-space: nowrap;
		}
	}
	.kong {
		display: flex;
		flex-direction: column;
		align-items: center;
		.kong-p {
			width: 100%;
			text-align: center;
			color: #aaa;
			font-size: 24rpx;
		}
		
		.ico6n {
			width: 120upx !important;
		}
	}
	.titxts {
		padding: 10rpx 30rpx 30rpx;

		.co1 {
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
			background-color: #fff;
		}
		.kpp{
			border-radius: 20rpx 20rpx 0 0;
			width: 100%;
			height: 240rpx !important;
		}
		.co2{
			padding:10rpx 20rpx 20rpx;
			font-size: 26rpx;
			.txt0{
				font-weight: 700;
				margin-bottom: 30rpx;
			}
			.txtbx{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.t3{
					background-color: #f0f6ff;
					padding:6rpx;
					border-radius:5rpx;
					font-size: 20rpx;
					color: #1676fe;
				}
				.jdcss{
					display: flex;
					align-items: center;
					.daocss{
						padding: 10rpx 40rpx;
						background-color: #f0f6ff;
						border-radius: 40rpx;
						color: #1676fe;
					}
					.jiecss{
						padding: 10rpx 40rpx;
						background-color: #f0f6ff;
						border-radius: 40rpx;
						color: #1676fe;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>